30天打造品牌特色電商網站 Day.25 電商必用的提示-實作小範例

2021 iThome 鐵人賽

DAY 17

Modern Web

30天打造品牌特色電商網站系列第 25 篇

13th鐵人賽電商網站訊息框

atain880625

2021-10-10 14:25:17

1024 瀏覽

分享至

昨天介紹了各類提示框，今天來進行簡單的範例：製作一個詢問是否接受cookie的訊息框
同時也搭配 bootstrap 框架快速打造！

首先要先做出訊息框的大小及配置

<main>
	<div class="message-box">
    <div class="container"></div>
	</div>
	<body>
	...
	</body>
</main>

.message-box{
	/* 設定高度跟寬度 */
  width:300px;
  height:200px;
  /* 邊框及背景樣式 */
  border:2px solid #000000;
  background-color:#ffffff;
	/* fixed不讓這區塊隨滾輪移動 */
	position:fixed;
	/* 因為想放在左下角，因此設定上方跟左方的距離 */
  top:calc(100vh - 200px - 20px);
  left:20px;
}

因為我想要訊息框是在網頁滾動時，依然呈現在左下角，因此會設定 position:fixed 因此會放置在 <body></body> 之外，不讓他受到其他元件影響。
另外想要將訊息框放置在左下角，不要擋到中央區塊，因此使用 top(物件上方距離)和 left(物件與左方距離)來更動位置。
left 在這邊很單純，我希望跟左邊隔 20px，打上去就好了。
top 要空一大段距離，但是這段距離隨著不同裝置有不的數值，這裡使用css的計算機 calc ，在後方使用 ( ) 就能幫你算出需要的數值。使用 100vh (螢幕100%高度) 扣掉訊息框的 200px 高度，再扣掉 20px 是我想要為訊息框跟下方邊界留的距離，剩下就是訊息框在上方要留的高度了。

再來針對傳遞資訊做排版

<main>
	<div class="message-box">
	    <div class="container">
				<!-- 製作右上角的關閉叉叉：&times是叉叉實體字符，因此會使用文字的樣式 -->
	      <div class="row">
	        <div class="d-flex justify-content-end">
	          <button class="btn close">&times</button>
	        </div>
	      </div>
				<!-- 主要問題 -->
	      <div class="row justify-content-center question">
	        是否同意接受cookie?
	      </div>
				<!-- 同意按鈕 -->
	      <div class="row justify-content-center mt-3">
	        <button class="btn accept-btn">同意</button>
	      </div>
				<!-- 不同意按鈕 -->
	      <div class="row justify-content-center mt-2">
	        <button class="btn accept-no-btn">不同意</button>
	      </div>
	    </div>
	</div>
	<body></body>
</main>

/* 讓叉叉大一點 */
.close{
  font-size:20px;
}
/* 不想要按下按鈕的外圍樣式 */
.btn:focus{
  box-shadow:none;
}
/* 問題的字體大小 */
.question{
  font-size:16px;
}
/* 同意按鈕的字體大小、寬度、樣式 */
.accept-btn{
  font-size:14px;
  width:70%;
  background-color:#000000;
  color:#ffffff;
}
/* 同意按鈕滑鼠移入樣式 */
.accept-btn:hover{
  color:#ffffff;
  opacity:85%;
}
/* 同意按鈕的字體大小、寬度、樣式 */
.accept-no-btn{
  font-size:14px;
  width:70%;
  border:#000000 1.5px solid;
  color:#000000;
}

範例連結：https://codepen.io/aavlice/pen/gORVMLX

透過置換位置、樣式設計等，就能快速變出不同的用途！簡單介紹完電商的必用的提示類元件，多觀察並分析訊息傳遞的用途，可以將這類型元件運用得更恰當喔！